<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center flex_0_higd"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub fd0_0_higd'>
					<view class='flex flex-wrap align-center fd0_0_c0_higd' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">
						<text class='fu-iconfont2  fd0_0_c0_c0_higd'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='fd0_0_c1_c0_higd'>{{$t('安全演练详情')}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end fd0_0_c0_higd'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction align-stretch benben-flex-layout flex_1_higd">
				
				<view class='flex flex-direction align-stretch fd1_0_higd'>
					<image class='list_fd1_4_c0_c4_c1_higd' mode="aspectFit" :src='type==1?STATIC_URL+"254.png":type==2?STATIC_URL+"255.png":STATIC_URL+"256.png"'></image>
					<view class='flex flex-wrap align-center fd1_0_c0_higd'>
						<text class='fd1_0_c0_c0_higd'>{{info.ylmc}}</text>
					</view>
					<view class='flex flex-wrap align-center fd1_0_c1_higd'>
						<text class='fd1_0_c1_c0_higd'>{{$t('总人数')}}</text>
						<text>{{info.zrs}}</text>
					</view>
					<view class='flex flex-wrap align-center fd1_0_c1_higd'>
						<text class='fd1_0_c1_c0_higd'>{{$t('演练日期')}}</text>
						<text>{{info.ylrq}}</text>
					</view>
					<view class='flex flex-wrap align-center fd1_0_c1_higd'>
						<text class='fd1_0_c1_c0_higd'>{{$t('开始时间')}}</text>
						<text>{{info.ylsj}}</text>
					</view>
					<view class='flex flex-wrap align-center fd1_0_c1_higd'>
						<text class='fd1_0_c1_c0_higd'>{{$t('结束时间')}}</text>
						<text>{{info.end_time}}</text>
					</view>
					<view class='flex flex-wrap align-center fd1_0_c1_higd'>
						<text class='fd1_0_c1_c0_higd'>{{$t('演练地点')}}</text>
						<text>{{info.xqmc}}</text>
					</view>
					<view class='flex flex-wrap align-center fd1_0_c1_higd'>
						<text class='fd1_0_c1_c0_higd'>{{$t('演练主持人')}}</text>
						<text>{{info.memberuser_nickname}}</text>
					</view>
				</view>
				<view class='flex flex-direction align-stretch fd1_1_higd'>
					<view class='flex flex-wrap align-center fd1_0_c0_higd'>
						<text class='fd1_0_c0_c0_higd'>{{$t('演练预案')}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-between fd1_1_c1_higd'
						v-for="(item,index) in info.ylya" :key='index'>
						<text>{{item.name}}</text>
						<text  @tap.stop="handlePreview(item.path,item.name)">{{$t('预览')}}</text>
					</view>
				</view>
				<view class='flex flex-direction align-stretch fd1_1_higd'>
					<view class='flex flex-wrap align-center fd1_0_c0_higd'>
						<text class='fd1_0_c0_c0_higd'>{{$t('演练资源')}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-between fd1_1_c1_higd'
						v-for="(item,index) in info.ylzy" :key='index'>
						<text>{{item.name}}</text>
						<text  @tap.stop="handlePreview(item.path,item.name)">{{$t('预览')}}</text>
					</view>
				</view>
				<view class='flex flex-direction align-stretch fd1_1_higd'>
					<view class='flex flex-wrap align-center fd1_0_c0_higd'>
						<text class='fd1_0_c0_c0_higd'>{{$t('演练视频')}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-between fd1_1_c1_higd'
						v-for="(item,index) in info.video" :key='index'>
						<text>{{item.name}}</text>
						<text  @tap.stop="mixinToPlayVideo(item.path)">{{$t('预览')}}</text>
					</view>
				</view>
			</view>

			<!---flex布局flex布局结束-->


		</view>
	</page-body>
</template>
<script>
	import filePreview from '@/common/utils/filePreview.js'
	
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		mixins: [filePreview],
		components: {},


		data() {
			return {
				/** aid【ID】
				 *   xctp【演练现场图片】
				 *   video【演练视频】
				 *   ylzy【演练资源】
				 *   ylya【演练预案】
				 *   memberuser_nickname【演练主持人】
				 *   xqmc【演练地点】
				 *   end_time【演练结束时间】
				 *   ylsj【演练开始时间】
				 *   ylrq【演练日期】
				 *   zrs【总人数】
				 *   ylmc【演练名称】 **/
				"info": {
					"ylmc": "",
					"zrs": "",
					"ylrq": "",
					"ylsj": "",
					"end_time": "",
					"xqmc": "",
					"memberuser_nickname": "",
					"ylya": [],
					"ylzy": [],
					"video": [],
					"xctp": [],
					"aid": ""
				},
				"id": "",
				type:1,
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			let {
				id,
				type
			} = options
			if (id !== undefined) this.id = id
			if (type !== undefined) this.type = type
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.getoe86e17f25b4a4Func()
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//查询安全演练详情
			async getoe86e17f25b4a4Func() {
				//请求方法
				//数据验证

				let datainfo = await this.$api.get(global.apiUrls.post686e17f25b4a4, {
					aid: this.id
				});

				if (datainfo.data.code != 1) {
					this.$message.info(datainfo.data.msg);
					return
				}
				let infoinfo = datainfo.data;
				this.info = infoinfo.data

			},
			handlePreview(fileUrl,fileName) {
				  console.log(fileUrl)
				   console.log(fileName)
				   
			      this.previewFile(fileUrl, fileName)
			},
			  // 打开学习资料
			      seePdf(file, aid) {
			        let _this = this;
			        let id = aid;
			        let url = file;
			        // let files = uni.getStorageSync('files') ? JSON.parse(uni.getStorageSync('files')) : {}
			        // console.log(files)
			        // #ifdef APP-PLUS
			
			        let files = uni.getStorageSync('files') ? JSON.parse(uni.getStorageSync('files')) : {}
			        console.log(files)
			        if (files[id]) {
			          // 已下载的文件直接打开
			          plus.runtime.openFile(files[id], {}, (res) => {
			            console.log("res=>",res);
			            // downloadFile()
			          })
			        } else {
			          downloadFile()
			        }
			
			        function downloadFile() {
			          uni.showLoading({
			            title: '加载中'
			          })
			          const dtask = plus.downloader.createDownload(url, {}, function(d, status) {
			            if (status == 200) {
			              console.log('保存成功')
			              uni.hideLoading();
			              //下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
			              //const fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
			              files[id] = d.filename
			              uni.setStorageSync('files', JSON.stringify(files))
			              plus.runtime.openFile(d.filename) //选择软件打开文件
			            } else {
			              //下载失败
			              plus.downloader.clear() //清除下载任务
			              uni.hideLoading();
			              uni.showToast({
			                title: '文档加载失败，请稍后再试',
			                icon: 'none',
			              })
			            }
			          })
			          dtask.start()
			        }
			        // #endif
			
			        // #ifdef H5
			        window.open(url)
			        // #endif
			        // this.fileUrl = file[0].path;
			        // this.showPreview = true;
			        // let _this = this;
			        // _this.means_id = aid;
			        // uni.showLoading({
			        // 	title: '加载中...'
			        // })
			
			        // uni.downloadFile({
			        // 	url: file[0].path,
			        // 	success: function(res) {
			        // 		var filePath = res.tempFilePath;
			        // 		uni.hideLoading();
			        // 		uni.openDocument({
			        // 			filePath: filePath,
			        // 			showMenu: true,
			        // 			success: function(res) {
			        // 				console.log('打开文档成功');
			        // 			}
			        // 		});
			        // 	},
			        // 	fail: function(err) {
			        // 		uni.hideLoading();
			        // 		uni.showToast({
			        // 			title: '文档加载失败，请重试',
			        // 			icon: 'none'
			        // 		})
			        // 	}
			        // });
			      },
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;

		.flex_1_higd {
			padding: 16rpx 32rpx 16rpx 32rpx;

			.fd1_0_higd {
				margin: 0rpx 0rpx 16rpx 0rpx;
				background: #FFFFFF;
				width: 686rpx;
				height: 485rpx;
				border-radius: 16rpx;
				position: relative;
				padding: 24rpx;
			}
			.list_fd1_4_c0_c4_c1_higd {
				width: 138rpx;
				height: 120rpx;
				border-radius: 0rpx;
				position: absolute;
				top: 40rpx;
				right: 40rpx;
			}
		}

		.fd1_0_c0_higd {
			margin: 0rpx 0rpx 44rpx 0rpx;
		}

		.fd1_0_c0_c0_higd {
			color: var(--benbenFontColor0);
			font-size: 32rpx;
			font-weight: 500;
		}

		.fd1_0_c1_higd {
			margin: 0rpx 0rpx 24rpx 0rpx;
		}

		.fd1_0_c1_c0_higd {
			width: 170rpx;
			color: rgba(204, 204, 204, 1);
		}

		.fd1_1_higd {
			margin: 0rpx 0rpx 16rpx 0rpx;
			background: #FFFFFF;
			width: 686rpx;
			// height: 205rpx;
			border-radius: 16rpx;
			padding: 32rpx 24rpx 32rpx 24rpx;
		}

		.fd1_1_c1_higd {
			background: #F8F8F8;
			width: 638rpx;
			height: 80rpx;
			padding: 24rpx;
			color: rgba(54, 112, 245, 1);
			margin-bottom: 24rpx;
		}

		.flex_0_higd {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.fd0_0_higd {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.fd0_0_c1_c0_higd {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}
		}

		.fd0_0_c0_higd {
			width: 120rpx;

			.fd0_0_c0_c0_higd {
				font-size: 36rpx;
				color: #333;
			}
		}
	}
</style>
